<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">











<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>ioko-tapestry-commons - </title>
    <style type="text/css" media="all">
      @import url("./css/maven-base.css");
      @import url("./css/maven-theme.css");
      @import url("./css/site.css");
    </style>
    <link rel="stylesheet" href="./css/print.css" type="text/css" media="print" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
                                                    
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
                                                        
<script type="text/javascript">try {
                var pageTracker = _gat._getTracker("UA-75598-9");
                pageTracker._trackPageview();
                } catch(err) {}</script>
                    </head>
  <body class="composite">
    <div id="banner">
                  <a href="http://tapestry.formos.com/projects/ioko-tapestry-commons/" id="bannerLeft">
    
                                            <img src="images/tapestry-commons.png" alt="" />
    
            </a>
                        <a href="http://www.ioko.com/" id="bannerRight">
    
                                            <img src="images/ioko.png" alt="" />
    
            </a>
            <div class="clear">
        <hr/>
      </div>
    </div>
    <div id="breadcrumbs">
          
  

  
    
            
  
    
            <div class="xleft">
        Last Published: 2009-09-25
                      </div>
            <div class="xright">      
  

  
    
            
  
    
             Version: 1.6.0-SNAPSHOT
      </div>
      <div class="clear">
        <hr/>
      </div>
    </div>
    <div id="leftColumn">
      <div id="navcolumn">
           
  

  
    
            
  
    
                   <h5>Sites</h5>
            <ul>
              
    <li class="none">
                    <a href="http://tapestry.formos.com/projects/ioko-tapestry-commons/" class="externalLink">Release Site</a>
          </li>
              
    <li class="none">
                    <a href="http://tapestry.formos.com/nightly/ioko-tapestry-commons/" class="externalLink">Nightly Site</a>
          </li>
          </ul>
              <h5>Project Documentation</h5>
            <ul>
              
                
              
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
              
        <li class="collapsed">
                    <a href="project-info.html">Project Information</a>
                </li>
          </ul>
                        <h5>Developers</h5>
            <ul>
              
    <li class="none">
                    <a href="development.html">Development Guide</a>
          </li>
          </ul>
                                           <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy">
            <img alt="Built by Maven" src="./images/logos/maven-feather.png"></img>
          </a>
                       
  

  
    
            
  
    
        </div>
    </div>
    <div id="bodyColumn">
      <div id="contentBox">
        <div class="section"><h2>Tapestry Mixins</h2>
<p>This module provides a number of useful mixins for use in developing Tapestry applications. We expect this module to grow over time as new mixins are added.</p>
<p>The sample-site project provides examples of these mixins in use.</p>
</div>
<div class="section"><h2>Overlay</h2>
<p>This mixin uses jQuery to render a popup div with shaded background. You can see an example on the web at http://flowplayer.org/tools/overlay.html.</p>
<p>The mixin can be applied to both a form element and should work with most kind of clickable link (but is intended mainly for use with actionlink).</p>
<p>The mixin creates a zone using the name you specify and directs the results of the form submit or actionlink into the zone div (within the overlay popup). So your page class needs to return a block to render into the zone, just like with the use of zone on a regular form or actionlink.</p>
<p>At this time the mixin cannot access the zone parameter of the form or actionlink, so you need to specify it twice, like so:</p>
<p>There is room for improvement in this mixin, eg. by allowing more control of the overlay size and not requiring an XHR call for the body of the overlay (could fairly easily delegate to a named block).</p>
<div class="source"><pre>    &lt;t:actionlink t:mixins=&quot;ioko/overlay&quot; zone=&quot;myZone&quot; overlay.zone=&quot;myZone&quot;&gt;...&lt;/t:actionlink&gt;</pre>
</div>
</div>
<div class="section"><h2>BoundCheckbox</h2>
<p>This mixin can tie together multiple checkboxes in a form so you have a 'master' checkbox which enables or disables all the 'child' checkboxes together. Can be useful in the header row of a grid component if you want to allow quick multi-select of all rows in the grid.</p>
<p>To make it work you need to have a property in your page which is the 'select all' state of the master checkbox, even though you don't really need to access this (since all child checkboxes will be selected on submit).</p>
<p>You then assign your master checkbox to a property of your page and tell each child to use it as its master checkbox. The sample-site has a full example, but here is an outline:</p>
<div class="source"><pre>  &lt;t:grid ...&gt;
        &lt;p:selectheader&gt;
                &lt;t:checkbox t:id=&quot;selectAllCheckbox&quot; value=&quot;selectAll&quot; t:mixins=&quot;ioko/boundcheckbox&quot;/&gt;
        &lt;/p:selectheader&gt;
        &lt;p:selectcell&gt;
                &lt;t:checkbox value=&quot;currentSelected&quot; t:mixins=&quot;ioko/boundcheckbox&quot; master=&quot;selectAllCheckbox&quot;/&gt;
        &lt;/p:selectcell&gt;
  &lt;/t:grid&gt;</pre>
</div>
</div>
<div class="section"><h2>DisableSorting</h2>
<p>This is a very simple mixin to disable sorting on all columns in a grid component.</p>
<div class="source"><pre>    &lt;t:grid t:mixins=&quot;ioko/disablesorting&quot; .../&gt;</pre>
</div>
</div>
<div class="section"><h2>Usage</h2>
<p>Simply add a dependency on this to your project. The mixins are mapped under the prefix 'ioko'.</p>
</div>

      </div>
    </div>
    <div class="clear">
      <hr/>
    </div>
    <div id="footer">
      <div class="xright">&#169;  
          2009
    
          ioko
          
  

  
    
            
  
    
  </div>
      <div class="clear">
        <hr/>
      </div>
    </div>
  </body>
</html>
